<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>互验互签电子签章</title>
    <link href="../web/images/patch/logo.png" rel="shortcut icon" sizes="any" />
    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
    <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>

    <!-- todo: 替换为api.js 实际的文件地址-->
    <script src="./generic-legacy/webBridge/api.js"></script>
    <script src="./api.js"></script>

    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html {
        min-width: 900px;
      }
      .box {
        height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .title {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        font-weight: 500;
        display: grid;
        align-items: center;
        padding-left: 20px;
      }
      .box-buttons {
        display: flex;
        margin-left: 40px;
      }
      .btn {
        padding: 4px 10px;
        cursor: pointer;
        margin-right: 15px;
        font-size: 12px;
      }
      .flex {
        display: flex;
      }

      .header {
        border-bottom: solid 1px #efefef;
        padding: 15px;
      }

      .viewer {
        flex-grow: 1;
      }
      .justify-between {
        justify-content: space-between;
      }

      .div-mask {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        display: grid;
        place-content: center;
      }
      .box-config {
        background: #fff;
        width: 500px;
        height: 400px;
        overflow: scroll;
        border-radius: 4px;
        padding: 15px;
      }
      .box-config .item-config {
        display: grid;
        grid-template-columns: 100px 1fr;
      }
      .box-config .item-config:not(:first-child) {
        border-top: solid 1px #ccc;
        margin-top: 15px;
        padding-top: 15px;
      }
      .logo {
        margin-right: 3px;
        display: flex;
        align-items: center;
      }
      .logo-img {
        width: 29px;
        margin-right: 6px;
        border-radius: 6px;
      }
      .logo-title {
        font-size: 14px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="box" id="app">
      <el-form class="header flex justify-between">
        <div class="flex">
          <div class="logo">
            <img class="logo-img" src="./generic-legacy/web/images/patch/aaa.jpg" alt="">
            <img class="logo-img" src="../web/images/patch/aaa.jpg" alt="">
            <span class="logo-title">省/市电子交易系统</span>
          </div>
          <div class="flex">
            <div class="box-buttons">
              <el-button v-if="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.onePage !== 'null'" @click="editorExec('sealAddNormal')">快速签章</el-button>
              <el-button v-if="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.continuity !== 'null'" @click="editorExec('SealAddContinued')">连续签章</el-button>
              <el-button v-if="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.multipage !== 'null'" @click="editorExec('sealAddBatch')">多页签章</el-button>
              <el-button v-if="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.pagingSeal !== 'null'" @click="editorExec('sealAddGap')">骑缝签章</el-button>
              <el-button v-if="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.keyword !== 'null'" @click="editorExec('sealAddByWord')">关键字签章</el-button>
              <el-button v-if="signatureSealComponentConfig.electronicSealSignatureConfig.removeSignature !== 'null'" @click="editorExec('sealRemove')">撤章</el-button>
              <el-button v-if="signatureSealComponentConfig.electronicSealSignatureConfig.validateSignature !== 'null'" @click="editorExec('sealValidate')">验章</el-button>
            </div>
            <div class="box-buttons">
              <el-button v-if="signatureSealComponentConfig.tools.revolve !== 'null'"  @click="editorExec('rotateRight')">旋转</el-button>
              <el-button v-if="signatureSealComponentConfig.tools.download !== 'null'"  @click="editorExec('download')">下载</el-button>
              <el-button v-if="signatureSealComponentConfig.tools.print !== 'null'"  @click="editorExec('print')">打印</el-button>
            </div>
          </div>
        </div>
        <div>
          <el-button @click="visibleSetting = true" type="primary" plain>文档设置</el-button>
        </div>
      </el-form>
      <div class="viewer">
        <div id="pdfWorkBench"></div>
      </div>
      <el-dialog v-model="visibleSetting" title="文档设置" draggable width="900">
        <el-form label-suffix=":" size="default" label-width="140" style="margin-right: 15px">
          <el-form-item label="上传文件">
            <div style="width: 100%">
              <el-upload
                action="#"
                class="upload"
                :http-request="onUpload"
                :multiple="false"
                accept="application/pdf"
                :show-file-list="false"
              >
                <template #trigger>
                  <el-button type="primary" plain>上传文件</el-button>
                </template>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="document参数">
            <el-input type="textarea" v-model="signatureSealComponentConfig.document" rows="8" clearable> </el-input>
          </el-form-item>
          <el-form-item label="callBackUrl">
            <el-input
              v-model="signatureSealComponentConfig.tradingSystemConfig.callBackUrl"
              placeholder="输入文件地址"
              @blur="getAwaitingSignatureFileName"
            ></el-input>
          </el-form-item>
          <el-form-item label="PDF功能配置">
              <label style='margin: 0 6px;'>
                  旋转:
                  <el-switch v-model="signatureSealComponentConfig.tools.revolve" active-value="rotateRight"
                      inactive-value="null">
                  </el-switch>
              </label>
              <label style='margin: 0 6px;'>
                  搜索:
                  <el-switch v-model="signatureSealComponentConfig.tools.search" active-value="find"
                      inactive-value="null">
                  </el-switch>
              </label>
              <label style='margin: 0 6px;'>
                  下载:
                  <el-switch v-model="signatureSealComponentConfig.tools.download" active-value="download"
                      inactive-value="null">
                  </el-switch>
              </label>
              <label style='margin: 0 6px;'>
                  打印:
                  <el-switch v-model="signatureSealComponentConfig.tools.print" active-value="print"
                      inactive-value="null">
                  </el-switch>
              </label>
              <label style='margin: 0 6px;'>
                  页面:
                  <el-switch v-model="signatureSealComponentConfig.tools.pages" active-value="thumbnail"
                      inactive-value="null">
                  </el-switch>
              </label>
              <label style='margin: 0 6px;'>
                  书签:
                  <el-switch v-model="signatureSealComponentConfig.tools.bookmarks" active-value="bookMark"
                      inactive-value="null">
                  </el-switch>
              </label>
          </el-form-item>
          <el-form-item label="签章功能配置">
            <label style='margin: 0 6px;'>
                快速签章:
                <el-switch v-model="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.onePage"
                    active-value="sealAddNormal" inactive-value="null">
                </el-switch>
            </label>
            <label style='margin: 0 6px;'>
              连续签章:
              <el-switch v-model="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.continuity"
                  active-value="sealAddContinued" inactive-value="null">
              </el-switch>
          </label>
            <label style='margin: 0 6px;'>
                多页签章:
                <el-switch v-model="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.multipage"
                    active-value="sealAddBatch" inactive-value="null">
                </el-switch>
            </label>
            <label style='margin: 0 6px;'>
                骑缝签章:
                <el-switch v-model="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.pagingSeal"
                    active-value="sealAddGap" inactive-value="null">
                </el-switch>
            </label>
            <label style='margin: 0 6px;'>
                关键字签章:
                <el-switch v-model="signatureSealComponentConfig.electronicSealSignatureConfig.addSignature.keyword"
                    active-value="sealAddByWord" inactive-value="null">
                </el-switch>
            </label>
            <label style='margin: 0 6px;'>
                签章详情:
                <el-switch v-model="signatureSealComponentConfig.electronicSealSignatureConfig.viewSignatureDetail"
                    active-value="signatureDetail" inactive-value="null">
                </el-switch>
            </label>
            <label style='margin: 0 6px;'>
                撤章:
                <el-switch v-model="signatureSealComponentConfig.electronicSealSignatureConfig.removeSignature"
                    active-value="sealRemove" inactive-value="null">
                </el-switch>
            </label>
            <label style='margin: 0 6px;'>
                验章:
                <el-switch v-model="signatureSealComponentConfig.electronicSealSignatureConfig.validateSignature"
                    active-value="sealValidate" inactive-value="null">
                </el-switch>
            </label>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="visibleSetting=false">取消</el-button>
            <el-button type="primary" @click="initPdf">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <script>
      // window.BASEURL = "http://172.165.17.46:8082"
      window.BASEURL = "http://39.105.128.110:8868/api"
      const App = {
        data() {
          return {
            // 签章组件配置
            signatureSealComponentConfig: {
              //文件上传数据
              document: '',
              // 工具条显示那些入口 , 不传则显示工具条所有入口
              tools: {
                //是否显示"右转"按钮
                revolve: 'rotateRight',
                //是否启用"搜索"功能
                search: 'find',
                //是否显示"下载"按钮
                download: 'download',
                //是否显示"打印"按钮
                print: 'print',
                //是否显示"书签"按钮
                bookmarks: 'bookMark',
                //是否启用"缩略图"功能
                pages: 'thumbnail',
              },
              electronicSealSignatureConfig: {
                //签章添加功能配置, false 停用所有签章添加， 默认为 addSignatureConfig 默认项
                addSignature: {
                  onePage: 'sealAddNormal',    //是否启用单页签章
                  continuity: 'sealAddContinued', //是否启用连续签章
                  multipage: 'sealAddBatch',  //是否启用多页签章
                  pagingSeal: 'sealAddGap', //是否启用骑缝签章
                  keyword: 'sealAddByWord',    //是否启用关键字签章
                },
                removeSignature: 'sealRemove',//是否可删除签章
                viewSignatureDetail: 'signatureDetail',//是否可查看签章详细信息
                validateSignature: 'sealValidate',//是否可用验章功能
              },
              tradingSystemConfig: {
                // 回调地址
                // callBackUrl: 'http://localhost:8080/callback/certificateChain'
                callBackUrl: 'http://172.165.17.46:8081/callBack'
              }
            },
            visibleSetting: false,
          };
        },
        methods: {
          //向编辑器发送执行请求
          editorExec(method) {
            console.log("editorExec ", method);
            try {
              if (window.editor) {
                editor.exec({
                  method,
                });
              } else {
                ElementPlus.ElMessage.warning(`请先点击右侧 "文档设置"，初始化工作台后，方可使用此功能。 `);
              }
            } catch (e) {
              ElementPlus.ElMessage.error(e.message);
            }
          },
          initPdf() {
            let editorConfig = {
              document: JSON.parse(this.signatureSealComponentConfig.document)
            };
            let toolsExcludes = []
            let { tools, electronicSealSignatureConfig } = this.signatureSealComponentConfig
            for (let key in tools) {
              if (
                Object.prototype.hasOwnProperty.call(tools, key) &&
                (tools[key] !== 'null' || tools[key] === null)
              ) {
                toolsExcludes.push(tools[key])
              }
            }
            for (let key in electronicSealSignatureConfig) {
              if (
                key !== 'addSignature' &&
                Object.prototype.hasOwnProperty.call(electronicSealSignatureConfig, key) &&
                (electronicSealSignatureConfig[key] !== 'null' || electronicSealSignatureConfig[key] === null)
              ) {
                toolsExcludes.push(electronicSealSignatureConfig[key])
              }
            }
            for (let key in electronicSealSignatureConfig.addSignature) {
              if (
                Object.prototype.hasOwnProperty.call(electronicSealSignatureConfig.addSignature, key) &&
                (electronicSealSignatureConfig.addSignature[key] !== 'null' ||
                  electronicSealSignatureConfig.addSignature[key] === null)
              ) {
                toolsExcludes.push(electronicSealSignatureConfig.addSignature[key])
              }
            }
            editorConfig.toolsExcludes = toolsExcludes;
            editorConfig.callBackUrl = this.signatureSealComponentConfig.tradingSystemConfig.callBackUrl;

            console.log("editorConfig", editorConfig);
            if (!window.editor) {
              window.editor = new PDFAPI.DocEditor('pdfWorkBench', editorConfig);
            } else {
              //初始化编辑器
              editor.exec({
                method: 'init',
                data: editorConfig,
              });
            }
            this.visibleSetting = false;
          },
          async onUpload(param) {
            const form = new FormData();
            form.append('file', param.file);
            var pThis = this;
            var loadingInstance = ElementPlus.ElLoading.service({
              target: '.el-dialog',
              text: '文件上传中...',
            });
            // await axios.post('http://172.165.17.46:8081/api/document/upload', form).then(
            await axios.post('http://39.105.128.110:8081/api/document/upload', form).then(
              ({ data }) => {
                if (data.code == 0) {
                  ElementPlus.ElMessage.success('文件上传成功');
                  pThis.signatureSealComponentConfig.document = JSON.stringify(data.data.document);
                } else {
                  ElementPlus.ElMessage.error('文件上传失败');
                }
              },
              () => {
                ElementPlus.ElMessage.error('文件上传失败');
              }
            );
            loadingInstance.close();
          },
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount('#app');
    </script>
    <script>
      // var editorConfig = {
      // document: {
      //   appId: "A001",
      //   userId: "1",
      //   bizNo: "476f7ea4d29d47b79cadd75151ad5bb2",
      //   fileKey: "test(1)-TBTX9yEN.pdf",
      //   fileType: "pdf",
      //   fileName: "test(1).pdf",
      //   token:
      //     "eyJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImFwcElkIjoiQTAwMSIsInVzZXJJZCI6IjEiLCJiaXpObyI6IjQ3NmY3ZWE0ZDI5ZDQ3Yjc5Y2FkZDc1MTUxYWQ1YmIyIiwiZmlsZUtleSI6InRlc3QoMSktVEJUWDl5RU4ucGRmIiwiZmlsZVR5cGUiOiJwZGYiLCJmaWxlTmFtZSI6InRlc3QoMSkucGRmIiwidG9rZW4iOm51bGx9LCJleHAiOjE3MjA4NDkxMzF9.Bz-4QlXbIV4bQce2cS7ocvX8r7eVgbqq-0RDpEaf5qY",
      // },
      // };
      // window.editor = new PDFAPI.DocEditor("pdfWorkBench", editorConfig);
    </script>
    <script src="../webPatch/main.js"></script>
  </body>
</html>
